<template>
    <div class="contents">
        <div class="growhead" color="#000">
			<van-nav-bar
			title="设计师"
			left-text="返回"
			left-arrow
			@click-left="onClickLeft"
			/>
		</div>
        <nav class="nav">
            <van-tabs>
            <van-tab v-for="(item, index) in cityall" :title="item" :key="index">
            </van-tab>
            </van-tabs>       
        </nav>
        <ul>
            <li>
                <section class="everytor">
                    <aside class="tormag">
                        <img class="touxiang" src="./../assets/img/userimg1.jpg" alt="">
                        <div class="nameandtime">
                            <span>韩梅梅</span><br/>
                            <span class="nametime">43分钟前</span>
                        </div>
                        <p class="callhe"><span>联系他</span></p>
                    </aside>
                    <img class="torshow" src="./../assets/img/userimg1.jpg" alt="">
                </section>
            </li>
            <li>
                <section class="everytor">
                    <aside class="tormag">
                        <img class="touxiang" src="./../assets/img/userimg1.jpg" alt="">
                        <div class="nameandtime">
                            <span>韩梅梅</span><br/>
                            <span class="nametime">43分钟前</span>
                        </div>
                        <p class="callhe"><span>联系他</span></p>
                    </aside>
                    <img class="torshow" src="./../assets/img/userimg1.jpg" alt="">
                </section>
            </li>
            <li>
                <section class="everytor">
                    <aside class="tormag">
                        <img class="touxiang" src="./../assets/img/userimg1.jpg" alt="">
                        <div class="nameandtime">
                            <span>韩梅梅</span><br/>
                            <span class="nametime">43分钟前</span>
                        </div>
                        <p class="callhe"><span>联系他</span></p>
                    </aside>
                    <img class="torshow" src="./../assets/img/userimg1.jpg" alt="">
                </section>
            </li>
            <li>
                <section class="everytor">
                    <aside class="tormag">
                        <img class="touxiang" src="./../assets/img/userimg1.jpg" alt="">
                        <div class="nameandtime">
                            <span>韩梅梅</span><br/>
                            <span class="nametime">43分钟前</span>
                        </div>
                        <p class="callhe"><span>联系他</span></p>
                    </aside>
                    <img class="torshow" src="./../assets/img/userimg1.jpg" alt="">
                </section>
            </li>
        </ul>
        
    </div>
</template>


<script>
import Vue from 'vue'
import Header from './Header'
import { NavBar,Tab, Tabs  } from 'vant';

Vue.use(Tab).use(Tabs);
Vue.use(NavBar);
export default {
	data () {
		return {
            cityall:["全部","郑州","上海","杭州","北京","成都","其他"]
        }
	},
	methods: {
	  onClickLeft () {
		this.$router.go(-1);
	  }
	},
	components: {
		Header
	}
}

</script>

<style lang="scss" scoped="scoped">
.everytor{
    margin:0.2rem 0.1rem 0 0.1rem;
    .tormag {
			display: flex;
			align-items: center;
			height:0.39rm;
            .touxiang{
                display: block;
                width:0.39rem;
                height:0.39rem;
                border-radius: 50%;
            }
			.nameandtime{
				height:0.36rem;
                display: inline-block;
				font-size:0.12rem;
                width:0.6rem;
				span{				
					margin:0 0 0 0.1rem;
					padding:0;
					line-height:0;
				}
				.nametime{
					color:#a4a2a2;
				}
			}
            .callhe{
                width:02.52rem;
                text-align: right;
                line-height: 0.39rem;
                span{
                    display: inline-block;
                    width:0.8rem;
                    height:0.3rem;
                    background: #ddd;
                    font-size: 0.12rem;
                    text-align: center;
                    line-height: 0.3rem;
                }
            }
		}
        .torshow{
            height:1.8rem;
            width:100%;  
            margin-top:0.1rem;
        }
}

</style>